import * as echarts from '../../ec-canvas/echarts';
import geoJson from './china.js';

const app = getApp();
var arr=[];
var arrA=[];
var arrB=[];
var arrC=[];
var arrD=[];
var ReversrArray=[];
Page({
  onShareAppMessage: function (res) {
    return {
      title: 'ECharts 可以在微信小程序中使用啦！',
      path: '/pages/index/index',
      success: function () { },
      fail: function () { }
    }
  },
  data: {
    ec: {
      
    },
    newlists:[]

  },
onLoad:function(opiions)
{
  var that =this;
  wx.request({
    url: 'https://api.tianapi.com/txapi/ncovcity/index?key=395c73a804a3aac86034b897584b4cf0',
    success(res)
    {
      
      res.data.newslist.forEach(element => {
      
        element.name=element.provinceShortName,
        element.value=element.currentConfirmedCount
      })
     that.setData({
       newlists:res.data.newslist
       
     })
     that.barComponent = that.selectComponent('#mychart-dom-area');
     that.init_map();
    
  }
  
});
//历史记录
wx.request({
  url: 'https://c.m.163.com/ug/api/wuhan/app/data/list-total',
  success(res)
  {
    ReversrArray=res.data.data.chinaDayList.reverse()
    console.log(res)  
    arrA=ReversrArray.map(obj=>{
      return obj.total.confirm
    })
    arrB=ReversrArray.map(obj=>{
      return obj.total.suspect
    })
    arrC=ReversrArray.map(obj=>{
      return obj.total.dead
    })
    arrD=ReversrArray.map(obj=>{
      return obj.total.heal
    })
    arr=ReversrArray.map(obj=>{
      return obj.date
    })
    that.lineComponent = that.selectComponent('#mychart-dom-line');
that.init_line();
  }
})
//疫情趋势

},
init_map: function() {
  this.barComponent.init((canvas, width, height) => {
    // 初始化图表
    const barChart = echarts.init(canvas, null, {
      width: width,
      height: height
    });
    canvas.setChart(barChart);
    echarts.registerMap('china', geoJson);
    barChart.setOption(this.getBarOption());
    // 注意这里一定要返回 chart 实例，否则会影响事件处理等
    return barChart;
  });

},
init_line: function() {
  this.lineComponent.init((canvas, width, height) => {
  // 初始化图表
  const lineChart = echarts.init(canvas, null, {
          width: width,
          height: height
       });
       canvas.setChart(lineChart);
  
        lineChart.setOption(this.getLineOption());
  // 注意这里一定要返回 chart 实例，否则会影响事件处理等
        return lineChart;
      });
    },
  
  
getBarOption(){
  return{
    tooltip: {
      trigger: 'item',
      formatter: function(parms)
      {
return parms.name+'确诊'+':'+parms.data.value+'人'
      }
    },
//视觉映射
    visualMap: {
      type: 'piecewise', // 定义为分段型 visualMap
      left: 'left',
      top: 'bottom',
      pieces: [
        {min: 1000}, // 不指定 max，表示 max 为无限大（Infinity）。
        {min: 500, max: 1000},
        {min: 100, max: 499},
        {min: 10, max: 99},
        {min: 1, max: 9},
      ],
       color:['#7A2F11', '#C94D22', '#EE8859', '#F3B494','#F5DED3']
    
    },
  
    series: [{
      type: 'map',
      mapType: 'china',
      label: {
        normal: {
          show: true
        },
        emphasis: {
          textStyle: {
            color: '#fff'
          }
        }
      },
      itemStyle: {

        normal: {
          borderColor: '#389BB7',
          areaColor: '#fff',
        },
        emphasis: {
          areaColor: '#389BB7',
          borderWidth: 0
        }
      },
      animation: false,
//数据部分
      data: this.data.newlists

    }],

  }
  
},
// 疫情趋势
getLineOption() {
  return {
    color: ["#D46D21", "#BC371F", "#666666", "#3B8A50"],
    legend: {
      //a确诊 b疑似 c死亡 d治愈
      data: ['确诊', '疑似', '死亡', '治愈'],
      top: 0,
      right: 30,
      backgroundColor: 'white',

    },
    grid: {
      left: '13%', //组件距离容器左边的距离
      right: '13%',
    },
    tooltip: {
      show: true,
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: arr.reverse(),
      show: true
    },
    yAxis: {
      x: 'center',
      type: 'value',
      splitLine: {
        lineStyle: {
          type: 'dashed'
        }
      },
      show: true,
    },
    series: [{
        name: '确诊',
        type: 'line',
        smooth: true,
        data: arrA.reverse(),
      }, {
        name: '疑似',
        type: 'line',
        smooth: true,
        data: arrB.reverse(),
      }, {
        name: '死亡',
        type: 'line',
        smooth: true,
        data: arrC.reverse()
      },
      {
        name: '治愈',
        type: 'line',
        smooth: true,
        data: arrD.reverse()
      }
    ]
  }
},
  onReady() {
  }
});
